<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<% 
	String context = request.getContextPath(); 
	String basePath = request.getServerName() + ":" + request.getServerPort() + context + "/";
%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>图片轮播示例</title>
		<style type="text/css">
			body{background:#BCD68D;line-height: 40px;padding:0 30px}
		</style>
	</head>
	<body>
		<h3>引入 plugins/roll.js 文件</h3>
		<h1>图片轮播示例</h1>
		<div id="roll" style="border: 1px solid;"></div>
		<h3>html代码：</h3>
		&lt;div id="roll">&lt;/div>
		<h3>js代码：</h3>
		var options = {<br />
			&nbsp;&nbsp;imgs:[<br />
				&nbsp;&nbsp;&nbsp;&nbsp;{src:"img/headphot5.jpg",href:"button.html"},<br />
				&nbsp;&nbsp;&nbsp;&nbsp;{src:"img/headphot5.jpg"},<br />
				&nbsp;&nbsp;&nbsp;&nbsp;{src:"img/headphot5.jpg"}<br />
				&nbsp;&nbsp;],<br />
				&nbsp;&nbsp;units:"px",//单位，可以是%<br />
				&nbsp;&nbsp;width:400,//图片宽度<br />
				&nbsp;&nbsp;height:160,//图片高度<br />
				&nbsp;&nbsp;time:3000,//轮播间隔时间<br />
				&nbsp;&nbsp;direction:"X"//轮播方向<br />
			}<br />
			$("#roll").roll(options);
	</body>
	<script src="<%=context%>/microcore/jquery-2.1.0.min.js"></script>
	<script src="<%=context%>/microcore/plugins/roll.js"></script>
	<script>
		$(function(){
			var options = {
				imgs:[
					{src:"<%=context%>/microcore/img/headphot5.jpg",href:"<%=context%>/html/button.html"},
					{src:"<%=context%>/microcore/img/headphot5.jpg"},
					{src:"<%=context%>/microcore/img/headphot5.jpg"}
				],
				units:"px",
				width:400,
				height:160,
				time:3000,
				direction:"x"
			}
			$("#roll").roll(options);
		});
	</script>
</html>
